{% extends "base.html" %}

{% block content %}
<div class="hero">
    <h2>发现校园美食</h2>
    <p>探索各个食堂的美味窗口</p>
</div>

<div class="canteens-grid">
    {% for canteen in canteens %}
    <div class="canteen-card">
        <div class="card-header">
            <h3>{{ canteen.name }}</h3>
            <span class="location">{{ canteen.location }}</span>
        </div>
        <div class="card-body">
            <p class="type">{{ canteen.type }}</p>
            <p class="description">{{ canteen.description }}</p>
            <p class="price">人均 ¥{{ canteen.avg_price }}</p>
            <div class="rating">
                {% for i in range(5) %}
                    {% if i < canteen.score|int %}
                        <span class="star filled">★</span>
                    {% else %}
                        <span class="star">★</span>
                    {% endif %}
                {% endfor %}
                <span class="score">{{ canteen.score }}</span>
            </div>
        </div>
        <div class="card-footer">
            <a href="{{ url_for('detail', canteen_id=canteen.id) }}" class="btn">查看详情</a>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}